<template>
  <el-row :gutter="10" v-loading="loading">
    <el-col :span="8">
      <el-card>
        <div>
          <el-image :src="img" class="image"></el-image>
        </div>
        <div align="center" id="" class="">
          <el-popover placement="top" :width="400" trigger="click">
            <template #reference>
              <el-button>更新照片</el-button>
            </template>
            <el-upload
              class="upload-demo"
              drag
              :action="uploadUrl"
              :headers="header"
              :on-success="uploadSeccess"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 jpg/png 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-popover>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card">
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
        <el-descriptions
          class="margin-top"
          title="用户信息"
          :column="3"
          direction="vertical"
          :size="size"
          border
          v-if="!isUpdate"
        >
          <template #extra>
            <el-button type="primary" size="small" @click="isUpdate = true"
              >修改</el-button
            >
          </template>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ userInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              性别
            </template>
            {{ userInfo.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              年龄
            </template>
            {{ userInfo.age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ userInfo.mobile }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <i class="el-icon-tickets"></i>
              身份证号
            </template>
            <el-tag size="small">{{ userInfo.idNumber }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              联系地址
            </template>
            {{ userInfo.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              描述
            </template>
            {{ userInfo.description }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          class="margin-top"
          title="用户信息"
          :column="3"
          direction="vertical"
          :size="size"
          border
          v-if="isUpdate"
        >
          <template #extra>
            <el-button type="primary" size="small" @click="update()"
              >提交</el-button
            >
          </template>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              用户名
            </template>
            <el-input
              v-model="userInfo.name"
              placeholder="请输入内容"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              性别
            </template>

            <el-select
              v-model="userInfo.sex"
              placeholder="请选择性别"
              style="width: 100%"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              年龄
            </template>
            <el-input
              v-model="userInfo.age"
              placeholder="请输入内容"
              type="number"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            <el-input
              v-model="userInfo.mobile"
              placeholder="请输入内容"
              maxlength="11"
              minlength="11"
            ></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <i class="el-icon-tickets"></i>
              身份证号
            </template>
            <el-tag size="small">{{ userInfo.idNumber }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              联系地址
            </template>
            {{ userInfo.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              描述
            </template>
            <el-input
              type="textarea"
              :rows="5"
              autosize
              placeholder="请输入内容"
              v-model="userInfo.description"
            >
            </el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card style="padding-right: 200px">
        <el-button @click="getCode" v-if="code == 0">获取临时码</el-button>
        <span v-else>临时码：{{ code }}</span>
        <el-table
          :data="recordData"
          style="margin-left: 36px; margin-top: 36px"
        >
          <el-table-column
            prop="data_time"
            label="日期"
            sortable
            align="center"
            width="200"
          >
          </el-table-column>

          <el-table-column
            label="状态"
            width="200"
            align="center"
            filter-placement="bottom-end"
            :filters="[
              { text: '人脸', value: 'face' },
              { text: '输码', value: 'code' },
            ]"
            :filter-method="methodFilter"
          >
            <template #default="scope">
              <el-tag type="info" v-if="scope.row.method == 'face'"
                >人脸</el-tag
              >
              <el-tag type="info" v-else>输码</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getInfo } from "@/network/user.js";
import { changeInfo } from "@/network/user.js";
import { get } from "@/network/record.js";
import { add, getAvailable } from "@/network/access.js";
export default {
  name: "HostInfo",
  data() {
    return {
      size: "",
      header: {},
      uploadUrl: "/api/host/upload",
      userInfo: {},
      img: "/api/host/getimg",
      loading: false,
      isUpdate: false,
      changeInfo: {},
      recordData: [],
      code: 0,
    };
  },
  created() {
    this.loading = true;
    this.header.authorization = window.localStorage.getItem("authorization");
    getInfo()
      .then((res) => {
        Object.assign(res.data, res.data2);
        this.userInfo = res.data;
        this.img = this.img + "/" + this.userInfo.mobile;
      })
      .then(() => {})
      .catch((err) => {
        this.$message.error("网络错误");
      });
    get()
      .then(
        (res) => {
          if (res.code == 200) {
            this.recordData = res.data;
            console.log(this.recordData);
          } else {
            this.$message.error(res.data);
          }
        },
        (err) => {
          this.$message.error("网络错误");
        }
      )
      .catch((err) => {
        this.$message.error("网络错误");
      });
    getAvailable().then(
      (res) => {
        this.code = res.data[0].accessCode;
      },
      (err) => {}
    );

    this.loading = false;
  },

  methods: {
    uploadSeccess() {
      this.$message.success("照片更新成功，将在下次登陆时更新");
    },
    getCode() {
      let data = {
        finish_time: "2099-12-31 00:00:00",
        host_mobile: this.userInfo.mobile,
      };
      add(data).then(
        (res) => {
          this.code = res.data.accessCode;
          this.$message.success("获取成功");
        },
        (err) => {}
      );
    },
    update() {
      this.isUpdate = false;
      this.loading = true;
      changeInfo(this.userInfo)
        .then(
          (res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
            } else {
              this.$message.error("修改失败");
            }
          },
          (err) => {
            this.$message.error("出错了");
          }
        )
        .then(() => {
          this.loading = false;
        });
    },
    methodFilter(value, row) {
      return row.method === value;
    },
  },
};
</script>

<style scoped>
image {
  width: 200px;
  height: 200px;
}
margin-top {
  margin-top: 20px;
}
.upload-demo {
  width: 100%;
  height: 100%;
}
</style>